<template>
  <el-dialog :visible="visible" class="contacts-dialog" :before-close="handleClose" :title="title" width="574px">
    <el-table :data="contacts" height="30vh">
      <el-table-column prop="number" label="number" align="center"></el-table-column>
      <el-table-column prop="name" label="name" align="center"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'ContactsDialog',
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    title: {
      type: String,
      required: true,
      default: ''
    },
    contacts: {
      type: Array,
      required: false,
      default: () => ([])
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped lang="scss">
.contacts-dialog {
  ::v-deep {
    .el-table__header-wrapper {
      display: none;
    }

    .el-table td, .el-table th.is-leaf {
      border-bottom: none;
    }
  }
}
</style>
